<template>
	<view class="merchant-feedback-container">
		<!-- 头部 -->
		<view class="header">
			<text class="title">用户反馈管理</text>
			<view class="filter-group">
				<picker mode="selector" :range="statusOptions" @change="handleStatusFilter">
					<view class="filter-btn">
						{{ statusFilter || '全部状态' }}
						<uni-icons type="arrowdown" size="14" color="#666" />
					</view>
				</picker>
			</view>
		</view>

		<!-- 反馈列表 -->
		<scroll-view class="feedback-list" scroll-y>
			<view v-for="(item, index) in filteredFeedbacks" :key="index" class="feedback-card"
				:class="statusClass(item.status)" @click="handleViewDetail(item)">
				<view class="feedback-header">
					<text class="order-id">反馈ID：{{ item.feedback_id }}</text>
					<text class="time">{{ formatTime(item.created_at) }}</text>
				</view>

				<view class="location-info">
					<text class="user">用户：{{ item.user_name || '匿名用户' }}</text>
					<text class="contact">联系方式：{{ item.contact || '未提供' }}</text>
				</view>

				<view class="content-wrapper">
					<text class="label">反馈内容：</text>
					<text class="content">{{ item.content }}</text>
				</view>

				<view class="action-bar">
					<text class="status-tag">{{ statusText[item.status] }}</text>
					<!-- <view class="action-buttons">
						<button v-if="item.status === 'pending'" class="action-btn reply-btn"
							@click.stop="handleReply(item)">
							立即回复
						</button>
						<button class="action-btn mark-btn" :class="{ disabled: item.status === 'closed' }"
							@click.stop="handleMarkStatus(item)">
							{{ item.status === 'closed' ? '已关闭' : '标记处理' }}
						</button>
					</view> -->
				</view>
			</view>

			<view v-if="filteredFeedbacks.length === 0" class="empty">
				<!-- <image src="/static/merchant-empty.png" class="empty-img" /> -->
				<text class="empty-text">暂无相关反馈</text>
			</view>
		</scroll-view>

		<!-- 反馈详情弹窗 -->
		<uni-popup ref="detailPopup" type="bottom">
			<view class="detail-popup">
				<!-- 弹窗内容 -->
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		queryAdminFeedback,
		// updateFeedbackStatus
	} from '../../request/api.js'
	import {
		useUserStore
	} from '../../stores/user.js'

	// 状态配置
	const statusOptions = ['全部', '待处理', '已回复', '已关闭']
	const statusText = {
		pending: '待处理',
		replied: '已回复',
		closed: '已关闭'
	}

	// 数据
	const feedbackList = ref([])
	const statusFilter = ref('全部')
	const statusFilterSymbol = ref('')
	const currentPage = ref(1)
	const resID = useUserStore().student_id
	// 加载数据
	const loadFeedback = async () => {
		try {
			const res = await queryAdminFeedback(resID)
			feedbackList.value = res.feedbacks
		} catch (error) {
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		}
	}

	// 状态过滤
	const filteredFeedbacks = computed(() => {
		return feedbackList.value.filter(item => {
			if (statusFilter.value === '全部') return true
			return item.status === statusFilterSymbol.value.toLowerCase()
		})
	})

	// 状态样式
	const statusClass = (status) => ({
		'status-pending': status === 'pending',
		'status-replied': status === 'replied',
		'status-closed': status === 'closed'
	})

	// 时间格式化
	const formatTime = (timeStr) => {
		const date = new Date(timeStr)
		return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
	}

	// 事件处理
	const handleStatusFilter = (e) => {
		statusFilter.value = statusOptions[e.detail.value];
		const tt = Object.entries(statusText).find(item => item[1] === statusOptions[e.detail.value])
		if (tt) {
			statusFilterSymbol.value = tt[0]
		}
		loadFeedback()
	}

	const handleReply = async (item) => {
		// 跳转到回复页面
		uni.navigateTo({
			url: `/pages/merchant/feedback-reply?id=${item.feedback_id}`
		})
	}

	const handleMarkStatus = async (item) => {
		if (item.status === 'closed') return

		try {
			const newStatus = item.status === 'replied' ? 'closed' : 'replied'
			await updateFeedbackStatus(item.feedback_id, newStatus)
			item.status = newStatus
			uni.showToast({
				title: '操作成功',
				icon: 'success'
			})
		} catch (error) {
			uni.showToast({
				title: '操作失败',
				icon: 'none'
			})
		}
	}

	// 初始化加载
	loadFeedback()
</script>

<style scoped>
	.merchant-feedback-container {
		padding: 20rpx;
		background: #f5f7fa;
		min-height: 100vh;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.filter-group {
		display: flex;
		gap: 20rpx;
	}

	.filter-btn {
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		background: #fff;
		border: 1rpx solid #eee;
		display: flex;
		align-items: center;
	}

	.feedback-list {
		height: calc(100vh - 160rpx);
	}

	.feedback-card {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.feedback-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.order-id {
		color: #666;
		font-size: 26rpx;
	}

	.time {
		color: #999;
		font-size: 24rpx;
	}

	.location-info {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
		margin-bottom: 20rpx;
	}

	.user,
	.contact {
		color: #666;
		font-size: 28rpx;
	}

	.content-wrapper {
		margin-bottom: 24rpx;
	}

	.label {
		color: #333;
		font-weight: 500;
	}

	.content {
		color: #666;
		line-height: 1.6;
	}

	.action-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #eee;
		padding-top: 20rpx;
	}

	.status-tag {
		padding: 6rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
	}

	.action-buttons {
		display: flex;
		gap: 20rpx;
	}

	.action-btn {
		height: 60rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
	}

	.reply-btn {
		background: #409eff;
		color: #fff;
	}

	.mark-btn {
		background: #e6a23c;
		color: #fff;
	}

	.mark-btn.disabled {
		background: #c0c4cc;
	}

	/* 状态颜色 */
	.status-pending .status-tag {
		background: #fef0f0;
		color: #f56c6c;
	}

	.status-replied .status-tag {
		background: #ecf5ff;
		color: #409eff;
	}

	.status-closed .status-tag {
		background: #f4f4f5;
		color: #909399;
	}

	.empty {
		text-align: center;
		padding: 100rpx 0;
	}

	.empty-img {
		width: 300rpx;
		height: 200rpx;
		opacity: 0.6;
		margin-bottom: 24rpx;
	}

	.empty-text {
		color: #999;
		font-size: 28rpx;
	}
</style>